<template>
  <div id="taskDetail">
    <el-card>
      <div>
        <div class="header">
          <el-descriptions :column="8" label-class-name="importance" content-class-name="importance">
            <el-descriptions-item label="状态">
              <div v-html="$api.status.taskStatus(detailData.status, optionsGroup[$api.Enum.DicTypeTaskStatus])"></div>
            </el-descriptions-item>
            <el-descriptions-item label="总数量">{{ detailData.total_number }}</el-descriptions-item>
            <el-descriptions-item label="成功数量">{{ detailData.success_number }}</el-descriptions-item>
            <el-descriptions-item label="失败数量">{{ detailData.error_number }}</el-descriptions-item>
          </el-descriptions>
          <div class="buttonBox">
            <el-button v-if="index == 1" type="success" @click="changeStatus">提交执行</el-button>
            <el-button @click="$router.push('/cardTask')">返回列表</el-button>
          </div>
        </div>

        <el-descriptions :column="4">
          <el-descriptions-item label="用户名">{{ detailData.user_name }}</el-descriptions-item>
<!--          <el-descriptions-item label="任务编号">{{ detailData.id }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="任务序列号">{{ detailData.task_sn }}</el-descriptions-item>-->
          <el-descriptions-item label="类型">{{ detailData.type_name }}</el-descriptions-item>
          <el-descriptions-item label="固定文件">{{ detailData.affix_file }}</el-descriptions-item>
          <el-descriptions-item label="解析文件">{{ detailData.is_parse_file }}</el-descriptions-item>
          <el-descriptions-item label="错误">{{ detailData.error }}</el-descriptions-item>
          <el-descriptions-item label="执行耗时">{{ detailData.exec_duration }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ detailData.create_dt }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ detailData.audit_dt }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ detailData.finish_dt }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card>
      <div class="config">
        <div class="addFile">
          <el-button v-if="index == 1" type="success" :title="'上传配置数据'" @click="addFileButton">添加配置数据</el-button>
          <el-link v-if="detailData.affix_file">任务文件下载</el-link>
        </div>

        <el-descriptions border class="options">
          <el-descriptions-item label="渠道名称" v-if="detailData.options.channel_name">{{ detailData.options.channel_name }}</el-descriptions-item>
          <el-descriptions-item label="应用商" v-if="detailData.options.agent_app_id">{{ detailData.options.agent_app_name }}</el-descriptions-item>
          <el-descriptions-item label="目标存在" v-if="detailData.options.goal_exist">{{detailData.options.goal_exist == 1? '覆盖' : '跳过'}}</el-descriptions-item>
          <el-descriptions-item label="运营商" v-if="detailData.options.operator_key">{{detailData.options.operator_key_name}}</el-descriptions-item>
          <el-descriptions-item label="取卡时间" v-if="detailData.options.get_date">{{ detailData.options.get_date }}</el-descriptions-item>
          <el-descriptions-item label="静默周期" v-if="detailData.options.silent_cycle">{{ detailData.options.silent_cycle }}</el-descriptions-item>
          <el-descriptions-item label="套餐组" v-if="detailData.options.group_id">{{ detailData.options.group_name }}</el-descriptions-item>
          <el-descriptions-item label="套餐" v-if="detailData.options.combo_id">{{ detailData.options.combo_name }}</el-descriptions-item>
        </el-descriptions>
      </div>

    </el-card>
    <el-card>
      <div class="record-list">
        <div class="query">
          <h3>执行结果</h3>
          <div>
            <el-form>
              <el-form-item>
                <el-input v-model="recordQueryInfo.iccid" placeholder="iccid"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select placeholder="状态" v-model="recordQueryInfo.status">
                  <el-option v-for="item in optionsGroup[$api.Enum.DicTaskLog]" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="getRecordList">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-table :data="RecordList" style="width: 100%" v-loading="loading">
          <el-table-column prop="source.line" label="行" width="50"></el-table-column>
          <el-table-column prop="data.iccid" label="iccid" width="180"></el-table-column>
          <el-table-column prop="data.msisdn" label="号码" width="120"></el-table-column>
          <el-table-column prop="status_name" label="状态" width="50"></el-table-column>
          <el-table-column prop="error" label="错误描述"></el-table-column>

          <template slot="empty">
            <myEmpty></myEmpty>
          </template>
        </el-table>
        <myPaging :queryInfo="recordQueryInfo" :getListData="getRecordList"></myPaging>
      </div>
    </el-card>

    <myDialog ref="updataDialog">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="上传配置文件" name="addFile">
          <div>
            <ol v-if="detailData.type == 51">
              <el-link type="primary">
                <downloadExcel name="数据模板" :data="exportModuleAPP">下载模板</downloadExcel>
              </el-link>
              <li>列数据第一行 填写 iccid；从第二行往下为正式数据，以89860开始的20位字符。；</li>
              <li>列数据第二行 填写 msisdn；从第二行往下为正式数据，表示电话号码。</li>
            </ol>
            <ol v-else>
              <el-link type="primary">
                <downloadExcel :data="exportModule" name="数据模板">下载模板</downloadExcel>
              </el-link>
              <li>A 列数据第一行 填写 iccid；从第二行往下为正式数据，以89860开始的20为字符。</li>
            </ol>
          </div>
          <el-upload :on-change="changeFile" ref="uploadFile" :action="uploadData.url" :auto-upload="false"
            :headers="uploadData.headers" :file-list="fileShow" :on-remove="moveFile" :disabled="fileList ? true : false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
            <el-button slot="trigger" type="primary" :disabled="fileList ? true : false">选取文件</el-button>
            <el-button type="success" @click="submitUpload" :disabled="fileList ? false : true">提交数据</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="配置数据写入" name="addText">数据写入</el-tab-pane>
      </el-tabs>
    </myDialog>
  </div>
</template>

<script>
export default {
  name: "WuliankaTaskdetail",

  data() {
    return {
      optionsGroup: [],
      detailData: {
        options: {}
      },
      uploadData: {
        url: "",
        headers: { Authorization: JSON.parse(localStorage.getItem("token")).token }
      },
      exportModule: [
        { 'iccid': '' }
      ],
      exportModuleAPP: [
        { 'iccid': '', 'msisdn': '' },
      ],
      fileList: "",
      fileShow: [],
      statusId: "",
      recordQueryInfo: {
        task_id: "",
        page: 1,
        size: 10,
        iccid: "",
        status: "",
        total: 0
      },
      RecordList: [],
      optionsText: {},
      activeName: "addFile",
      tabStatus: "",
      index: '',
      loading: false
    };
  },

  mounted() {
    this.index = new URLSearchParams(location.search).get('index')
    this.getDetailListData();

    this.getRecordList();
    this.$api.foundation.dicListExtendCache(
      [
        this.$api.Enum.DicTypeCardStatus,
        this.$api.Enum.DicTypeCardSystem,
        this.$api.Enum.DicTypeCardType,
        this.$api.Enum.DicTypeTaskType,
        this.$api.Enum.DicTypeCardRealName,
        this.$api.Enum.DicTypeOperator,
        this.$api.Enum.DicTaskLog,
        this.$api.Enum.DicTypeResellerList,
        this.$api.Enum.DicTypeTaskStatus,
      ],
      {},
      res => {
        this.optionsGroup = res;
      }
    );
  },

  methods: {
    getDetailListData() {
      this.$api.task.taskDetail({ id: localStorage.getItem("taskId") }, res => {
          if (res.status) {
            document.getElementById('pageTitle').innerHTML = res.data.title
            this.detailData = res.data;
          }
        }
      );
    },
    submitNewTaskForm() {
      this.newTaskForm.type = Number(this.newTaskForm.type);
      this.newTaskForm.group_id = Number(this.newTaskForm.group_id);
      this.newTaskForm.silent_cycle = Number(this.newTaskForm.silent_cycle);
      this.$api.task.taskCreate(this.newTaskForm, res => {
        if (!res.status) {
          this.$message.error(res.message);
          return;
        }
        this.newTaskDialog.dialog.dialogVisible = false;
        this.detailButton(res.data, true);
        this.$message.success("创建成功");
      });
    },
    changeFile(file, list) {
      let fileSize = file.raw.size / 1024 / 1024 < 5;
      if (!fileSize) {
        this.fileShow = [];
        this.fileList = "";
        return this.$message.error("上传文件大小不能超过 5MB!");
      } else {
        if (file.raw.type === "application/vnd.ms-excel") {
          this.fileList = file;
        } else if (
          file.raw.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        ) {
          this.fileList = file;
        } else {
          this.$message.error("文件格式错误!");
          this.fileShow = [];
        }
      }
    },
    moveFile() {
      this.fileList = "";
    },
    changeStatus() {
      this.$confirm(`确认提交执行?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$api.task.taskChangeStatus({id: this.detailData.id, status: this.Enum.StatusWaitExec}, res => {
            if (!res.status) {
              this.$message.error(res.message);
              return
            }
            this.$message.success("修改成功!");
            this.$router.push('/cardTask')
          }
        );
      }).catch(() => {
        this.statusId = this.detailData.status;
      });
    },
    submitUpload() {
      const formdata = new FormData();
      formdata.append("file", this.fileList.raw);
      this.$api.task.taskRecordAddFile({ task_id: this.detailData.id }, formdata, res => {
        this.fileShow = [];
        this.fileList = "";
        if (!res.status) {
          this.$message.error(res.message);
          return;
        }
        this.$message.success(res.message);
        this.$refs.updataDialog.dialog = false
        this.getDetailListData()
      });
    },
    getRecordList() {
      this.loading = true
      this.recordQueryInfo.task_id = localStorage.getItem("taskId")
      this.$api.task.taskRecordList(this.recordQueryInfo, res => {
        if (!res.status) {
          this.$message.error(res.message);
          return;
        }
        this.RecordList = res.data.list;
        this.recordQueryInfo.total = res.data.page.total;
        this.loading = false
      });
    },
    addFileButton() {
      this.$refs.updataDialog.dialog = true;
    },
    handleClick(name) {
      this.activeName = name.name;
    }
  },

};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .buttonBox {
    display: flex;
  }
}

.config {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .addFile {
    width: 100px;
    display: flex;
    margin-right: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .options {
    width: 100%;
  }
}


.el-upload {
  .el-button {
    margin-top: 20px;
    margin-right: 15px;
  }
}

.record-list {
  .query {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .el-form {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      .el-form-item {
        margin-bottom: 0;
        margin-left: 10px;
      }
    }
  }
}
</style>
<style>
#taskDetail .importance {
  font-size: 14px;
  color: black;
}
</style>